import { useState } from 'react'
import '../index.css'
import ProfileSetting from './ProfileSetting'

export default function () {
    const [username, setUsername] = useState('张三');
    const [unReadCount, setUnReadCount] = useState(1);
    return <>
        <p>
            常见需求：修改用户名 <br />
            用户名位于header中，个人设置页面修改后需要同步更新右上角的用户名
        </p>
        <h1>纯react版本</h1>
        <Header username={username} unReadCount={unReadCount} />
        <Setting username={username} changeUserName={setUsername} setUnReadCount={setUnReadCount} />
    </>;
}

function Header(props) {
    return (
        <div className='header'>
            <span>{props.username}</span>

            <span className='un-read'>
                未读
                <div className='un-read-num'>{props.unReadCount}</div>
            </span>
        </div>
    )
}

function Setting(props) {
    return (
        <div className='setting'>
            设置页面：
            <ProfileSetting username={props.username} changeUserName={props.changeUserName} setUnReadCount={props.setUnReadCount} />
            其它设置 <br />
            消息通知设置...

        </div>
    );
}

